<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav navigation</title>
	<style>
		ul{width: 604px;height: 70px;margin: 0 auto;overflow: hidden;
			background-image:-webkit-linear-gradient(top,#991d1d,#881f1f,#991d1d);
			background-image:-moz-linear-gradient(top,#991d1d,#881f1f,#991d1d);
			background-image:-ms-linear-gradient(top,#991d1d,#881f1f,#991d1d);
			background-image:-o-linear-gradient(top,#991d1d,#881f1f,#991d1d);
		}	
		ul li{float: left;list-style: none;margin: 0 auto;}
		ul li a,ul li a:before{display:block;text-decoration: none;padding: 0 25px;line-height: 70px;font-size: 20px;font-family: verdana;transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;position: relative;}
		ul li a{color: #fff;}
		ul li a:before{content: attr(data-name);color: #000;background-color: #ccc;position: absolute;top: 70px;left: 0;}
		ul li:hover a{margin-top: -70px;margin-bottom: 1px;}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#" data-name="Home">Home</a></li>
			<li><a href="#" data-name="About">About</a></li>
			<li><a href="#" data-name="Help">Help</a></li>
			<li><a href="#" data-name="Work">Work</a></li>
			<li><a href="#" data-name="Contact">Contact</a></li>
		</ul>
	</nav>
</body>
</html>